<template>
  <view style="height: 100vh; width: 100%" @click="onReport">
		<tabBar :currentIndex="0"></tabBar>
    <view class="content" @click="touchMainContent">
      <view class="box-search" @click="onHomeSearch">
        <u-icon type="search" name="search" label="搜索" />
      </view>
      <u-swiper
        height="346"
        class="banner"
        @click="clickBanner"
				:autoplay="true"
				imgMode="scaleToFill"
        :list="bannerList"
      ></u-swiper>

      <u-mask :zoom="false" :show="showSearchMask">
        <view class="content-mask">
          <image
            @click="showSearchMask = false"
            class="mask-close"
            src="/static/img/ic_close1.png"
            mode="aspectFit"
          ></image>
          <u-home-search ref="homeSearch"> </u-home-search>
        </view>
      </u-mask>

      <u-sticky offset-top="-14" style="width: 100%">
        <view class="tab-container">
          <view class="tab-tabs">
            <u-tabs
              :active-item-style="{ fontSize: '36rpx', color: '#21D2FF' }"
              font-size="26rpx"
              :show-bar="false"
              gutter="7"
              :list="list"
              :current="current"
              @change="change"
            >
            </u-tabs>
          </view>

          <view class="tab-dropdown drop-down-name" @click.stop="tapEvent">
            <view class="down-title" @click.stop="clkDropdown()">{{dictList[currentMajor].title}}</view>
            <img @click="clkDropdown" class="arrow-image" src="../../../static/img/arrow_down.png" alt="" srcset="">
            <view class="dropdown-slot-content content" v-if="dropdownOpen">
              <view
                class="drop-item dropdown-item"
                v-for="(item, index) in dictList"
                @click.stop="clkDropItem(item, index)"
                :class="[item.active ? 'active' : '']"
                :key="index"
                >{{ item.title }}</view
              >
            </view>
          </view>

          <!-- <view class="tab-dropdown" >
            <u-dropdown 
                        ref="uDropdown"
                        :showMask=false
                        class="my-class2"
                        active-color="#4D5B80">
              <u-dropdown-item :close-on-click-self=true
              class="my-class"
                               :borderBottom=false
                               @change="changeDropdown"
                               v-model="currentMajor"
                               :title="currentMajorName"
                               :options="dictList">
                <view class="dropdown-slot-content" >
                  <view class="dropdown-item-box">
                    <view @click="clkDropItem(item, index)"
                          class="dropdown-item"
                          :class="[item.active ? 'active' : '']"
                          v-for="(item, index) in dictList"
                          :key="index">
                      {{item.title}}
                    </view>
                  </view>
                </view>
              </u-dropdown-item>
            </u-dropdown>
          </view> -->
        </view>
      </u-sticky>

      <view>
        <u-line
          :hair-line="true"
          style="width: 692rpx"
          color="#949494"
          margin="0 auto"
        ></u-line>
        <view class="wrap-daka" v-if="current == 2">
          <view
            class="wrap-daka-item"
            v-for="(item, index) in dakaList"
            :key="index"
          >
            <view @click.stop="linkToPerson(item.id)">
              <u-avatar
                level-size="90"
                level-icon="/static/img/community/ic_daka.png"
                :show-level="true"
                :src="`${$store.state.img_url}${item.avatar}`"
                mode="circle"
                img-mode="aspectFill"
              >
              </u-avatar>

              <view style="margin-top: 10rpx" class="one-line-text user-name">{{
                item.nickName
              }}</view>
            </view>
            <u-follow-button
              v-if="item.id !== $store.state.userInfo.id"
              @clkFollow="onDakaFollow"
              :itemData="item"
              style="margin-top: 17rpx"
              :type="Number(item.attentionFlag)"
              :isFollowed="!!Number(item.attentionFlag)"
            ></u-follow-button>
          </view>
          <view style="position: relative; z-index: 7; margin-top: 60rpx;width:160rpx">
            <u-icon
              style="flex-grow: 1;"
              label-color="#21D2FF"
              @click="linkToMore"
              color="#21D2FF"
              label-pos="left"
              class="daka-more"
              name="arrow-right-double"
              label-size="31"
              size="40"
              label="更多"
            />
          </view>
        </view>

        <view class="page-box">
          <view class="item" v-for="(item, index) in tableData" :key="index">
            <u-item-userinfo
              :current="current"
              @follow="onFollow"
              
              class="item-userinfo"
              :dataItem="item"
            ></u-item-userinfo>
            <u-post-item
              
              class="item-postinfo"
              :dataItem="item"
            ></u-post-item>

            <view class="item-control-wrap">
              <view class="item-control">
                <u-icon
                  @click="clkZan(item, index)"
                  name="thumb-up"
                  v-if="item.thumbsFlag != '1'"
                  label-size="20"
                  size="40"
                  :label="item.thumbsNum"
                />
                <u-icon
                  v-else
                  @click="clkZan(item, index)"
                  name="thumb-up-fill"
                  label-size="20"
                  size="40"
                  :label="item.thumbsNum"
                />
                <u-icon
                  @click="clkFavorites(item)"
                  name="star"
                  v-if="item.collectionFlag != '1'"
                  label-size="20"
                  size="40"
                />
                <u-icon
                  v-else
                  @click="cancelFavorites(item)"
                  name="star-fill"
                  label-size="20"
                  size="40"
                />
                <u-icon
                  @click="linkToDetail(item)"
                  name="chat"
                  label-size="20"
                  size="40"
                  :label="item.commentNum"
                />
                <view @click.stop="clkMore(item)">
                  <u-icon
                    style="z-index: 79; position: relative"
                    id="btnChoose"
                    name="more-dot-fill"
                    label-size="20"
                    size="40"
                    label=""
                  />
                </view>
                <!-- <u-mask :show="reportShow"
                :custom-style="{background: 'transparent'}"
                        @click="onMask(item, index)"></u-mask> -->
              </view>

              <view v-if="item.showMore" class="dropdown-more-content">
                <image
                  class="dropdown-more-content__item more-item"
                  src="/static/img/ic_shang.png"
                  v-if="item.authorId !== $store.state.userInfo.id"
                  @click="clkReward(item)"
                ></image>
                <image
                  class="dropdown-more-content__item more-item"
                  src="/static/img/ic_jubao.png"
                  v-if="item.authorId !== $store.state.userInfo.id"
                  @click="clkReport(item)"
                ></image>
              </view>
            </view>
            <!-- && !closeListAd -->
            <u-ad-item
              :itemData="adList[0]"
              v-if="index == 1 && !closeListAd"
              @closeAd="adClose"
              class="item-addinfo"
              :dataItem="item"
            ></u-ad-item>
          </view>
          <u-loadmore
            :status="loadStatus"
            @loadMore="loadMoreHandle"
            bgColor="#ffffff"
          ></u-loadmore>
        </view>
      </view>

      <view class="dialog-container">
        <u-top-tips ref="uTips"></u-top-tips>

        <u-popup :closeable="true" mode="bottom" ref="popup_favorates">
          <scroll-view scroll-y style="max-height: 500rpx; padding-top: 60rpx">
            <u-cell-item
              :titleStyle="{ fontWeight: 500 }"
              title="选择收藏夹"
              @click="addFolder(item)"
              value="添加"
            />

            <u-cell-group title-bg-color="rgb(243, 244, 246)">
              <u-cell-item
                :titleStyle="{ fontWeight: 500 }"
                :title="item.clipName"
                v-for="(item, index) in collectionList"
                :key="index"
                @click="chooseFolder(item)"
              />
            </u-cell-group>
          </scroll-view>
        </u-popup>

        <u-modal
          ref="editModal"
          @cancel="cancelEditFolder()"
          @confirm="confirmEditFolder()"
          :show-title="false"
          :showCancelButton="true"
          v-model="showEditDialog"
        >
          <view class="slot-content">
            <input
              class="slot-field"
              label-width="0"
              v-model="folderName"
              placeholder="请输入收藏夹名称"
            />
          </view>
        </u-modal>
      </view>
    </view>
  </view>
</template>

<script>
import apis from "@/apis.js";
import tabBar from '@/components/tabBar.vue'
import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
export default {
	components: {
			tabBar
		},
  data() {
    return {
      reportShow: false,
      artId: "",
      collectId: "",
      closeListAd: false,
      isDot: false,
      folderName: "",
      showEditDialog: false,
      currentMajor: 0,
      currentMajorName: "全部专业",
      majorOptions: [
        {
          title: "全部专业",
          text: "全部专业",
          value: 1,
        },
      ],
      title: "Hello",
      collectionList: [],
      bannerList: [],
      showSearchMask: false,
      orderList: [[]],
      dataList: [
        {
          imgUrl:
            "//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg",
          title: "陆小凤1",
          majorStr: "专业A,专业C,专业D",
          info: "付款后30天内发货",
          showMore: false,
          price: "348.58",
          laoding: false,
          number: 2,
        },
        {
          imgUrl:
            "//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg",
          title: "陆小凤2",
          majorStr: "专业A,专业C,专业D",
          info: "付款后30天内发货",
          showMore: false,
          price: "348.58",
          laoding: false,
          number: 2,
        },
        {
          imgUrl:
            "//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg",
          title: "【葡萄藤】日系甜美风原创jk制服女2020新款",
          type: "45cm;S",
          info: "付款后30天内发货",
          majorStr: "专业A,专业C,专业D",
          showMore: false,
          laoding: false,
          number: 1,
        },
      ],
      list: [
        {
          name: "全部",
        },
        {
          name: "我关注的",
        },
        {
          name: "大咖",
        },
        {
          name: "推荐",
        },
      ],
      current: 0,
      dx: 0,
      loadStatus: "loadmore",
      tableData: [],
      dictList: [],
      form: {
        pageNo: 1,
        pageSize: 10,
      },
      dakaList: [],
      adList: [],
      dropdownOpen: false,
    };
  },
  onLoad() {
    // this.tableData = []
    // this.getCollectList()
    // this.pageNo =  1
    // this.getDictList()
    // console.log(this.$store.state);
		let that = this
		// alert(window.location.href.split('#')[0])
		let url = window.location.href
		this.$http.get(`${apis.wx_share}?url=${url}`).then(res => {
			// this.setIsShare(true)
			this.dataList = res.data
			let data = res.data
			console.log(data.signature, 'signature')
			that.$wx.config({
			  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: data.appid, // 必填，公众号的唯一标识
			  timestamp: data.timestamp, // 必填，生成签名的时间戳
			  nonceStr: data.nonceStr, // 必填，生成签名的随机串
			  signature: data.signature,// 必填，签名
			  jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
			});
			that.$wx.ready(function () {
					//分享到朋友
					that.$wx.onMenuShareAppMessage({
							title: "快戳我啊！让您享受白菜价网购的快感", // 分享标题
							desc: "先领优惠券再下单享受折上折,各种大额优惠券让你领到手软呦！快戳我！快戳我！", // 分享描述
							link: 'https://qitianh5.fornewtech.com/#/pages/index/redirect', // 分享链接
							imgUrl: "https://www.gomyorder.cn/logo.png", // 分享图标
							type: 'link', // 分享类型,music、video或link，不填默认为link
							success: function () {
									//alert("分享成功");
							},
							cancel: function () {
									//alert("未分享!");
							}
					});
					that.$wx.onMenuShareTimeline({
							title: "快戳我！让您享受白菜价网购的快感", // 分享标题
							link: 'https://qitianh5.fornewtech.com/#/pages/index/redirect', // 分享链接
							imgUrl: "https://www.gomyorder.cn/logo.png", // 分享图标
							trigger: function (res) {
							},
							success: function (res) {
							},
							cancel: function (res) {
							},
							fail: function (res) {
							}
					});
			});
		})
  },
  onReachBottom() {
    // 此tab为空数据
    this.form.pageNo = this.form.pageNo + 1;
    console.log("this.for", this.form);
    this.getList(this.current.toString);
  },
  onShow() {
		uni.hideTabBar()
    uni.setNavigationBarTitle({
      title: "社区论坛",
    });
    this.getSelfAuthorId();
    this.getCollectList();
    this.getDictList();
    this.getDakaList();
    this.getBanner();
    this.getAd();
    this.initData();
		wx.getStorage({
			key: 'adListShow',
			success: (res) => {
				console.log(res.data, '322323')
				this.closeListAd = res.data
			}
		})
    // console.log(this.$store.state, "onshow-tabbar")
  },
	computed: {
		...mapState(['isShare'])
	},
	methods: {
		...mapMutations(['setIsShare']),
	},
  methods: {
		tapEvent() {},
    onReport() {
      this.tableData.forEach((item) => {
        item.showMore = false;
      });
    },
    closeClassify(event) {
      var sp = document.getElementById("btnChoose");
      if (sp) {
        if (!sp.contains(event.target)) {
          // 这句是说如果我们点击到了id为popCategory以外的区域 并且不是 spbtn
          // this.$refs.category.closeClassify();
          this.tableData.forEach((item) => {
            item.showMore = false;
          });
        }
      }
    },
    linkToPerson(id) {
      this.$u.route({
        url: "pages/tabbar/tabbar-1/personHome",
        params: {
          id,
        },
      });
    },
    /**
     *  @function 页面跳转
     */
    clickBanner(index) {
      let url = this.bannerList[index].externalUrl;
      if (url) {
        window.location.href = url;
      }
    },
    adClose() {
			this.closeListAd = true;
			uni.setStorage({
			  key:"adListShow",
			  data: true
			})
    },
    // 获取广告
    getAd() {
      this.$http.get(apis.getListByAdviceListType_adviceType, {}).then((res) => {
        if (res.data.code === 200) {
          this.adList = res.data.result.map((item) => {
            return {
              ...item,
              adviceImg: `https://qitianapp.fornewtech.com/api${item.adviceImg}`,
            };
          });
					console.log(this.adList, 'adList')
          this.$forceUpdate();
        }
      });
    },
    getBanner() {
      this.$http.get(apis.getListByAdviceType, {}).then((res) => {
        if (res.data.code === 200) {
          this.bannerList = res.data.result.map((item) => {
            return {
              ...item,
              image: `https://qitianapp.fornewtech.com/api${item.adviceImg}`,
              title: item.adviceName,
            };
          });
          this.$forceUpdate();
        }
      });
    },
    onHomeSearch() {
      console.log("onHomeSearch");
      this.showSearchMask = true;
      this.$refs.homeSearch.init();
    },
    onMask(item) {
      console.log("item", item);
      this.reportShow = false;
      item.showMore = false;
      this.$forceUpdate();
    },
    onShare() {
      // 该对象已集成到this.$u中，内部属性如下
      this.$u.mpShare = {
        title: "分享", // 默认为小程序名称，可自定义
        path: "pages/tabbar/tabbar-1/tabbar-1", // 默认为当前页面路径，一般无需修改，QQ小程序不支持
        // 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
        // 支持PNG及JPG，默认为当前页面的截图
        imageUrl: "",
      };
    },
    // 获取登陆人信息
    getSelfAuthorId() {
      this.$http.get(apis.userAuthor_detail, {}).then((res) => {
        if (res.data.code === 200) {
          this.authorId = res.data.result.id;
          this.$store.commit("setUserInfo", res.data.result);
          uni.setStorageSync("userInfo", res.data.result);
          console.log("this.$store", this.$store.state);
        }
      });
    },
    // 获取大咖列表
    getDakaList() {
      this.$http
        .get(apis.user_pageList, {
          pageNo: 1,
          pageSize: 4,
          name: "",
          userType: "1",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.dakaList = res.data.result.records;
          }
        });
    },
    linkToMore() {
      console.log("asd");
      this.$u.route({
        url: "pages/tabbar/tabbar-1/high-list",
        params: {
          id: 0,
        },
      });
    },
    linkToDetail(item) {
      this.$u.route({
        url: "pages/tabbar/tabbar-1/post-detail?type=1" ,
        params: {
          id: item.id,
        },
      });
    },
    linkTo() {
      if (this.current === 2) {
        this.$u.route({
          url: "pages/tabbar/tabbar-1/high-list",
        });
      }
    },
    onDakaFollow(item) {
      if (item.attentionFlag === "1") {
        return false;
      }
      console.log("item", item);
      this.$http.post(apis.attention, { authorId: item.id }).then((res) => {
        if (res.data.code === 200) {
          this.dakaList.forEach((el, i) => {
            if (el.id === item.id) {
              el.attentionFlag = "1";
              this.$refs.uTips.show({
                title: "关注成功",
                type: "success",
                duration: "2300",
              });
            }
          });
        }
      });
    },
    // 关注
    onFollow(item) {
      console.log("item", item);
      this.$http
        .post(apis.attention, { authorId: item.authorId })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData.forEach((el, i) => {
              if (el.id === item.id) {
                el.attentionFlag = "1";
                this.$refs.uTips.show({
                  title: "关注成功",
                  type: "success",
                  duration: "2300",
                });
              }
            });
          }
        });
    },
    // loadMoreHandle() {
    // 	this.pageNo = this.pageNo + 1
    // 	this.getList()
    // },
    // 无限加载 利用公共方法判断
    onReachBottom() {
      console.log("sdfs");
      this.form.pageNo = this.form.pageNo + 1;
      this.getList(this.current);
    },
    getDictList() {
      this.$http.get(`${apis.getDictItems}/subject_type`).then((res) => {
        if (res.data.code === 0) {
          this.dictList = [
            {
              title: "全部专业",
              text: "全部专业",
              value: 0,
              active: true,
            },
          ].concat(res.data.result);
          // this.getList(0);
        }
      });
    },
    getCollectList() {
      this.$http.get(apis.collectionList).then((res) => {
        if (res.data.code === 200) {
          this.collectionList = res.data.result;
        }
      });
    },
    getList(index) {
      let apisUrl = "";
      if (Number(index) === 1) {
        // 关注
        apisUrl = apis.getAttentionArticleList;
      } else if (Number(index) === 2) {
        // 获取大咖
        apisUrl = apis.getStarArticleList;
      } else if (Number(index) === 3) {
        // 获取全部
        apisUrl = apis.getRecommendArticleList;
      } else if (Number(index) === 4) {
        // 根据帖子获取文章标题
        apisUrl = apis.getArticleList;
      } else {
        // 全部
        apisUrl = apis.articleGetALLArticleList;
      }
      this.$http
        .get(apisUrl, {
          ...this.form,
          subjectType: this.currentMajor || "",
          title: this.folderName,
          userId: "",
        })
        .then((res) => {
          if (res.data.code === 200) {
            // if (this.form.pageNo == 1) {
            // 	this.tableData = []
            // }
            let data = this.tableData.concat(res.data.result.records);
            data.forEach((item) => {
              item.showMore = false;
              item.subjectType_dictTextList = item.subjectType_dictText
                ? item.subjectType_dictText.split(",")
                : [];
            });
            if (this.current == 1) {
              // 关注过滤关注的
              this.tableData = data.filter((item) => {
                return (
                  item.attentionFlag == "1" &&
                  item.authorId !== this.$store.state.userInfo.id
                );
              });
            } else {
              this.tableData = data;
            }
            if (res.data.result.total >= this.tableData.length) {
              this.loadStatus = "nomore";
              this.isDot = true;
            } else {
              this.loadStatus = "loadmore";
              this.isDot = false;
            }
          }
        });
    },
    onCollect(item, index) {
      this.$http.post(apis.thumbsAgree, { id: item.id }).then((res) => {
        if (res.data.code === 200) {
          // this.tableData = []
          // this.getList()

          // console.log("item.thumbsFlag", item.thumbsFlag)
          this.$refs.uTips.show({
            title: item.thumbsFlag === "1" ? "取消成功" : "点赞成功",
            type: "success",
            duration: "2300",
          });
        }
      });
    },
    clkZan(item, index) {
      let url = item.thumbsFlag === "1" ? apis.thumbsCancel : apis.thumbsAgree;
      this.$http.post(url, { id: item.id }).then((res) => {
        if (res.data.code === 200) {
          this.tableData.forEach((el, i) => {
            if (el.id === item.id && item.thumbsFlag === "1") {
              el.thumbsFlag = "0";
              el.thumbsNum = item.thumbsNum - 1;
              this.$refs.uTips.show({
                title: "取消成功",
                type: "success",
                duration: "2300",
              });
            } else if (el.id === item.id && item.thumbsFlag === "0") {
              el.thumbsFlag = "1";
              el.thumbsNum = item.thumbsNum + 1;
              this.$refs.uTips.show({
                title: "点赞成功",
                type: "success",
                duration: "2300",
              });
            }
          });
        }
      });
    },
    clkMore(item) {
      this.reportShow = true;
      item.showMore = !item.showMore;
    },
    clkDropdown() {
      console.log("clkDropdown");
      this.dropdownOpen = !this.dropdownOpen;
    },
    clkReport(item) {
      let userInfo = this.$store.state.userInfo;
      if (userInfo.authenticationFlag === "2" || userInfo.starFlag === "1") {
        this.$u.route({
          url: "pages/post/report/report",
          params: {
            id: item.id,
          },
        });
      } else {
        uni.showModal({
          title: "提示",
          content: "认证后才能进行该操作，是否前往认证？",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/authentication/remind?auditType=1",
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
    cancelEditFolder() {
      console.log("cancel");
      // this.folderName = ''
    },
    confirmEditFolder(index) {
      this.showEditDialog = true;
      if (!this.folderName) {
        uni.showToast({
          title: "文件夹名称不能为空",
          icon: "none",
        });
        return;
      }

      this.$http
        .post(apis.collectionAdd, {
          artId: this.artId,
          clipId: 0,
          clipName: this.folderName,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$refs.uTips.show({
              title: " 创建成功",
              type: "success",
              duration: "2300",
            });
            this.folderName = "";
            this.showEditDialog = false;
            this.getCollectList();
          }
        });
    },
    addFolder(item) {
      this.showEditDialog = true;
      // 文章id
      this.artId = item.id;
      // this.$refs.popup_favorates.close();
    },
    chooseFolder(item) {
      console.log("chooseFolder");
      this.setFavorates(item);
      this.$refs.popup_favorates.close();
    },
    initData() {
      this.form.pageNo = 1;
      this.tableData = [];
      console.log("tsdf", this.current);
      this.getList(this.current.toString());
    },
    cancelFavorites(item) {
      this.$http
        .post(apis.collection_delete, {
          // "artId": this.collectId,
          artId: item.id,
          // "clipName": item.clipName,
          // "contextId": item.clipName
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData.forEach((el, i) => {
              if (el.id === item.id) {
                el.collectionFlag = "0";
                this.$refs.uTips.show({
                  title: "取消成功",
                  type: "success",
                  duration: "2300",
                });
              }
            });
            this.$forceUpdate();
          }
        });
    },
    setFavorates(item) {
      this.$http
        .post(apis.collection_context, {
          artId: this.collectId,
          clipId: item.id,
          clipName: item.clipName,
          contextId: item.clipName,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData.forEach((el, i) => {
              if (el.id === this.collectId) {
                el.collectionFlag = "1";
                this.$refs.uTips.show({
                  title: "收藏成功",
                  type: "success",
                  duration: "2300",
                });
              }
            });
            this.$forceUpdate();
          }
        });
    },
    clkFavorites(item) {
      this.collectId = item.id;
      this.$refs.popup_favorates.open();
    },
    clkReward(item) {
      this.$u.route({
        url: "pages/post/reward/reward",
        params: {
          id: item.id,
        },
      });
    },
    touchMainContent: function () {
      // this.$refs.uDropdown.close();
      this.dropdownOpen = false

      //this.$refs.dropdownMore.forEach(function(item, index, arr) {
      //item.close();
      //});
    },
    scroll: function () {
      this.dropdownOpen = false
      // this.$refs.uDropdown.close();
      // this.$refs.dropdownMore.forEach(function(item, index, arr){
      // 	item.close();
      // });
    },
    clkDropItem(item, index) {
      // this.$refs.uDropdown.close();
      this.dropdownOpen = false
      this.currentMajor = index;
      this.currentMajorName = item.title;
      this.dictList.forEach((el) => {
        el.active = false;
        if (el.value === item.value) {
          el.active = true;
        }
      });
      this.form.pageNo = 1;
      this.tableData = [];
      this.getList(this.current);
    },
    reachBottom() {
      // 此tab为空数据
      this.form.pageNo = this.form.pageNo + 1;
      console.log("this.for", this.form);
      this.getList(this.current);
    },
    // 页面数据
    getOrderList(idx) {
      for (let i = 0; i < 5; i++) {
        let index = this.$u.random(0, this.dataList.length - 1);
        let data = JSON.parse(JSON.stringify(this.dataList[index]));
        data.id = this.$u.guid();
        this.orderList[0].push(data);
      }
      this.loadStatus.splice(this.current, 1, "loadmore");
    },
    // tab栏切换
    change(index) {
      this.current = index;
      this.tableData = [];
      this.form.pageNo = 1;
      this.getList(index);
    },
    // tab栏切换
    changeDropdown(index) {
      this.form.pageNo = 1;
      console.log(index);
      this.currentMajor = index;
      this.currentMajorName = this.majorOptions[this.currentMajor - 1].title;
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.current = current;
    },
  },
};
</script>

<style>
	.overText{
		
	}
.page-box {
  padding-bottom: 150rpx;
}
.content-mask {
  display: flex;
  flex-flow: column nowrap;
}

.mask-close {
  width: 35rpx;
  height: 35rpx;
  align-self: flex-end;
  padding: 33rpx;
  /* margin-right: 33rpx; */
  /* margin-top: 33rpx; */
}

.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.content {
  text-align: center;
  padding: 23rpx 29rpx;
}

.box-search {
  display: flex;
  flex-flow: row nowrap;

  padding: 10rpx 20rpx;

  background: #e9ebf4;
  box-shadow: -4rpx -4rpx 12rpx #ffffff;
  opacity: 1;
  border-radius: 25rpx;
}

.banner {
  margin-top: 23rpx;
  height: 346;
}
</style>



<style lang="scss" scoped>
.tab-container {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  width: 100%;
  align-items: center;
  margin-top: 15rpx;
  justify-content: space-between;
  flex-shrink: 0;

  .tab-tabs {
    height: 80rpx;
    background-color: blue;
    // flex-grow: 2;
    width: 420rpx;
    // margin-left: -40rpx;
  }

  .tab-dropdown {
    width: 176rpx;
    // flex-grow: 1;
    height: 47rpx;
    line-height: 47rpx;
    position: relative;
    background: #E9EBF4;
    box-shadow: 0px 8rpx 9rpx 0px #DBD9E3;
    border-radius: 6rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #404F76;
    margin-bottom: 8rpx;
    .down-title {
      margin-left: -26rpx
    }
  }
}

.slot-content {
  display: flex;
  flex-flow: column nowrap;
  font-size: 31rpx;
  color: $u-content-color;
  padding: 80rpx 40rpx;

  .slot-field {
    width: auto;
    text-align: center;
  }
}
</style>

<style scoped lang="scss">
@import "uview-ui/index.scss";
.u-dropdown__content {
  height: 400rpx;
  overflow: scroll;
}
.arrow-image {
  position: absolute;
  top: 8px;
  right: 6px;
}
.dropdown-slot-content {
  padding: 16rpx;
  height: 254px;
  overflow: scroll;
  position: absolute;
  width: 176rpx;
  right: 0rpx;
  top: 52rpx;
  z-index: 99;
  background: #E9EBF4;
  box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 8rpx;

  .dropdown-item-box {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    // background-color: red;
    justify-content: space-between;

    

  }
}
.dropdown-item {
      align-items: flex-start;
      text-align: left;

      font-size: 26rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 32rpx;
      margin-bottom: 20rpx;
      color: #4d5b80;
      opacity: 1;
      &.active {
        color: #21d2ff;
      }
    }
.item {
  display: flex;
  flex-flow: column nowrap;

  border-bottom: 2rpx solid #bfbfbf;
  opacity: 1;
  &:nth-child(2) {
    // border-bottom: 0;
  }

  .item-userinfo {
    padding: 23rpx 0rpx 0rpx 0rpx;
  }

  .item-postinfo {
    padding: 13rpx 15rpx 1rpx 15rpx;
  }

  .item-addinfo {
    padding: 38rpx 15rpx 40rpx 15rpx;
  }

  .item-control {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 21rpx 15rpx 29rpx 15rpx;
    font-size: $artical-text-font;

    .item-control-item {
      width: 31rpx;
      height: 31rpx;

      .item-control-item-text {
        flex-grow: 1;
        font-size: 15rpx;
        font-family: SimHei;
        font-weight: 400;
        line-height: 21rpx;
        color: #4d5b80;
        opacity: 1;
      }
    }
  }
}

.item-control-wrap {
  position: relative;
}

.dropdown-more-content {
  //display: flex;
  //flex-flow: row nowrap;
  //justify-content: space-around;
  //background: #EFF1F7;
  //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
  //opacity: 1;
  //border-radius: 4px;

  // background-color: yellow;
  // width: 225rpx;
  position: absolute;
  right: 0;
  top: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;

  background: #eff1f7;
  box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 4rpx;
  z-index: 10075;

  &__item {
    width: 31rpx;
    height: 31rpx;
    padding: 15rpx 19rpx;
  }
}

.wrap-daka {
  display: flex;
  flex-flow: row nowrap;
  padding-left: 10rpx;
  padding-top: 40rpx;
  padding-bottom: 31rpx;
  border-bottom: 2rpx solid #bfbfbf;

  .wrap-daka-item {
    padding-right: 25rpx;
  }
}
.drop-down-name {
  .active {
    color: #21d2ff;
  }
}
</style>
<style lang="scss">
.u-swiper-image {
  object-fit: contain !important;
}
.daka-more {

}
.more-item {
  margin: 0 10rpx;
  // &:last-child {
  //   margin-right: 0;
  // }
}
</style>
